<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('集成数字化管理系统')" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集成看板</title>

    <style>
        .button-container {
            display: flex;
            justify-content: flex-end; /* 靠右对齐 */
            align-items: center;
            gap: 10px; /* 按钮间距 */
            padding: 5px; /* 容器内边距 */
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .button-container button {
            padding: 5px 15px; /* 按钮内边距 */
            font-size: 14px; /* 字体大小 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s;
        }

        .button-container button:hover {
            background-color: #0056b3;
        }
    </style>

    <style>
        .popup {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            line-height: 1.5; /* 行距 */
            white-space: normal; /* 允许内容自动换行 */
            display: none;
            z-index: 1000;
        }
    </style>
    <style>
        /* 设置整个页面的左右边距 */
       body {
           margin-left: 0px;  /* 页面左边距 */
           margin-right: 0px; /* 页面右边距 */
       }

       /* 取消 .row 的外边距，确保与屏幕的边距对齐 */
       .row.no-gutters {
           margin-left: 0 !important;
           margin-right: 0 !important;
           margin-top: 1px !important;
           margin-bottom: 1px !important;
           display: flex;
           align-items: stretch; /* 保证左右部分的高度一致 */
       }

       /* 设置列的左右内边距 */
       .row.no-gutters > [class*="col-"] {
           padding-left: 1px !important;  /* 左内边距 */
           padding-right: 1px !important; /* 右内边距 */
           margin-top: 1px !important;    /* 设置顶部外边距 */
           margin-bottom: 1px !important; /* 设置底部外边距 */
       }

       /* 设置 .ibox 的间距和内边距 */
       .ibox {
           margin-top: 0px !important;   /* 修改顶部外边距，减少顶部间距 */
           margin-bottom: 1px !important;
           padding: 0 !important; /* 去除默认内边距 */
           flex-grow: 1; /* 使 .ibox 在容器中高度平衡 */
           height: 100%; /* 确保 .ibox 高度占满 */
       }

       /* 设置 .ibox-content 的内边距 */
       .ibox-content {
           padding: 1px !important; /* 设置适当的内边距 */
       }

       /* 设置右侧部分容器，确保它与左侧平衡 */
       .right-side-box {
           display: flex;
           flex-direction: column;
           flex: 1;  /* 右侧部分与左侧平衡 */
           height: 100%; /* 确保右侧部分的高度和左侧一致 */
       }

       /* 设置右侧合并单元格的间距 */
       .right-side-box .ibox {
           margin: 1px !important;   /* 外边距 */
           padding: 0 !important;     /* 内边距 */
           flex-grow: 1;  /* 保证右侧单元格的高度和左侧一样 */
           height: 100%; /* 强制设置右侧单元格的高度 */
       }

       /* 设置 .ibox-content 内部的内边距 */
       .right-side-box .ibox-content {
           padding: 1px !important;  /* 添加适当的内边距 */
       }

       /* 设置 .col-sm-6 和 .col-sm-4 的内边距和外边距 */
       .col-sm-6, .col-sm-4 {
           padding-left: 2px !important;
           padding-right: 2px !important;
           margin-top: 2px !important;
           margin-bottom: 2px !important;
       }

       /* 调整顶部的间距，减小每个ibox间的空隙 */
       .custom-ibox {
           margin-top: 0px !important;  /* 调整上方间距 */
       }
    </style>
    <style>
        .custom-col {
            background-color: #e40744; /* 设置背景色 */
        }
    </style>
    <style>
        <!--        .custom-ibox {-->
        <!--            background-color: #e40744; /* 设置ibox的背景色 */-->
        <!--        }-->
    </style>
    <style>
        .echarts {
            background-color: #f0f0f0; /* 设置背景色为浅灰色 */
        }
    </style>


</head>
<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header" style="background-color: #8bc8e3;">
    <div class="col-sm-12 text-center">
        <!-- 点击标题跳转到后台管理页面 -->
        <a href="/index_topnav" style="text-decoration: none; color: inherit;">
            <p style="font-size: 28px; font-weight: bold; cursor: pointer; color: white;">
                集成数字化管理系统
            </p>
        </a>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" style="background-color: #8bc8e3;margin-top: 0;">
    <div class="button-container" style="margin-left: 2px">
        <h3 style="margin-right: 15px; margin-bottom: 0; color: red;">当前周期:年</h3>
        <button onclick="location.href='/echarts_week'">周</button>
        <button onclick="location.href='/echarts_month'">月</button>
        <button onclick="location.href='/echarts_quarter'">季度</button>
        <button onclick="location.href='/data_statistical_details'">统计报表</button>
        <button onclick="location.href='/cicd_runningtime_detail'">流水线运行时长</button>
    </div>
    <div class="row no-gutters" style="display: flex;">
        <!-- 左侧部分，使用 flex 布局分成两层 -->
        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!--集成时间成本-->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins custom-ibox">
                    <div class="ibox-title">
                        <h5 id="monthly-title"
                            onmouseover="showPopup(event, '实时更新<br>2024年累计数据')"
                            onmouseout="hidePopup()" style="color: blue;">年度集成版本分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart-integrated-time-cast"></div>
                    </div>
                </div>
            </div>

            <!-- 集成组版流水线成功率 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>集成自动组版各流水线每周的成功率')"
                            onmouseout="hidePopup()">集成组版流水线成功率</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echartsC2PipeSucRate"></div>
                    </div>
                </div>
            </div>
        </div>


        <div style="flex: 0 0 50%; display: flex; flex-direction: column;">
            <!--当天流水线运行情况-->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5 id="daily-title"
                            onmouseover="showPopup(event, '每日更新<br>计划完成版本数: 产品线当日输入的版本计划书数量<br>实际完成版本: 完成所有组版步骤，软件包已经上传到版本管理系统的版本数量<br>剩余时间: 基于历史流水线用时，预测此版本还有多长时间完成组版')"
                            onmouseout="hidePopup()" style="color: blue;">当天流水线运行情况</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echartsC2PipelineRunningStatus"></div>
                    </div>
                </div>
            </div>

            <div style="flex: 0 0 1; display: flex; flex-direction: row;">
                <!--集成失败问题分布-->
                <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                    <div class="ibox float-e-margins chart-box">
                        <div class="ibox-title">
                            <h5 onmouseover="showPopup(event, '每周更新<br>历史(2024-08-01开始)<br>累计自动组版失败的原因分布')"
                                onmouseout="hidePopup()">集成组版失败问题分布</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-C2IntegrationFailedDist"></div>
                        </div>
                    </div>
                </div>
                <!--集成准点率-->
                <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                    <div class="ibox float-e-margins chart-box">
                        <div class="ibox-title">
                            <h5 style="color: blue;"
                                onmouseover="showPopup(event, '实时更新<br>版本计划书输入的当日4:00点前构建到版本管理系统上为准时集成')"
                                onmouseout="hidePopup()">集成组版准点率</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-C2IntegratedOnTimeRate"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <div class="ibox float-e-margins chart-box" style="height: 100%;margin-left: 2px;">
                <div class="ibox-title">
                    <h5 style="color: blue;"
                        onmouseover="showPopup(event, '实时更新<br>监控当前还未发版或打tag的模块，模块版本号取自版本计划书')"
                        onmouseout="hidePopup()">当天模块待释放情况监控</h5>
                </div>
                <div class="ibox-content" style="padding: 0; height: calc(100% - 43px);">
                    <div class="echarts" id="echartsC2ModuleToBeReleasedDetail" style="width: 100%; height: 100%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters" style="display: flex;">
        <!-- 左侧部分，使用 flex 布局分成三列 -->
        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!-- C2版本释放成功率 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>版本释放成功率: 释放成功数/版本总数')"
                            onmouseout="hidePopup()">C2版本释放成功率</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart_c2_release_suc_rate"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 onmouseover="showPopup(event, '每周更新<br>历史累计版本释放失败的原因分布')"
                            onmouseout="hidePopup()">集成冒烟失败问题分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echartsC2IntegrationSmokeFailedDist"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!-- 发版情况总览 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box" style="width: calc(100% + 1px);">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>版本集成出来的当天16:00前释放为准时释放')"
                            onmouseout="hidePopup()">C2版本释放准点率</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart-c2_release_ontime_rate"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!-- 单个单元格 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box" style="width: calc(100% + 1px);">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>开发最近30天merge代码到主开发分支的次数')"
                            onmouseout="hidePopup()">代码提交人姓名词云图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echartsCodeSubmitterCloud"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters" style="display: flex;">
        <!-- 左侧部分，使用 flex 布局分成两层，宽度设置为 col-sm-4 -->
        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!-- 第一层，第一个单元格 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 onmouseover="showPopup(event, '每日更新<br>集成版本软件包自动部署到台架和实车的成功率')"
                            onmouseout="hidePopup()">C2部署成功率(OTA)</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-C2DeploySucRate"></div>
                    </div>
                </div>
            </div>
            <!-- 第二层，第一个单元格 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>版本发布成功率: 发布成功数/版本总数')"
                            onmouseout="hidePopup()">C2版本发布成功率</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart-c2-publish-suc-rate"></div>
                    </div>
                </div>
            </div>
        </div>


        <div style="flex: 0 0 25%; display: flex; flex-direction: column;">
            <!-- 第一层，第一个单元格 -->
            <div class="col-sm-12" style="padding: 2px;margin-right: 1px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '每周更新<br>历史部署失败的原因分布')"
                            onmouseout="hidePopup()">部署失败问题分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echartsC2DeployFailedDist"></div>
                    </div>
                </div>
            </div>
            <!-- 第二层，第一个单元格 -->
            <div class="ibox float-e-margins" style="flex: 1;margin-left: 1px; margin-right: 1px; margin-top: -2px; height: calc(100% - 1px);">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '实时更新<br>计划版本数: 产品线输出的计划数<br>释放版本数: 版本管理系统走完释放流程的版本数<br>发布版本数: 版本管理系统走完发布流程的版本数')"
                            onmouseout="hidePopup()">发版情况总览</h5>
                    </div>
                    <div class="ibox-content" style="padding: 0; height: calc(100% - 40px);">
                        <div class="echarts" id="echarts-C2ReleaseVersionOverview" style="width: 100%; height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧部分，包含三个单元格排成一行 -->
        <div style="flex: 0 0 25%; display: flex; flex-direction: column; justify-content: space-between;">
            <!-- 第四个单元格 -->
            <div class="ibox float-e-margins" style="flex: 1; margin-left: 2px;margin-right: 1px; margin-top: 10px; width: calc(100% - 4px);">
                <div class="ibox-title">
                    <h5 style="color: blue;"
                        onmouseover="showPopup(event, '实时更新<br>最近10个发布成功的版本')"
                        onmouseout="hidePopup()">最近10个发布版本</h5>
                </div>
                <div class="ibox-content" style="padding: 0; height: calc(100% - 40px);">
                    <div class="echarts" id="echartsPublishedVersions" style="width: 100%; height: 100%;"></div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 25%; display: flex; flex-direction: column; justify-content: space-between;">
            <!-- 第五个单元格 -->
            <div class="ibox float-e-margins" style="flex: 1;margin-left: 2px; margin-top: 10px; height: calc(100% - 1px);">
                <div class="ibox-title">
                    <h5 style="color: blue;"
                        onmouseover="showPopup(event, '实时更新<br>开发最近30天内merge代码到主开发分支的次数')"
                        onmouseout="hidePopup()">代码提交活动排行榜</h5>
                </div>
                <div class="ibox-content" style="padding: 0; height: calc(100% - 40px);">
                    <div class="echarts" id="echartsCodeSubmissionActivityRanking" style="width: 100%; height: 100%;"></div>
                </div>
            </div>
        </div>


    </div>



    <!-- 公用弹窗 -->
    <div id="popup" class="popup"></div>
    <script>
        function showPopup(event, message) {
            const popup = document.getElementById('popup');
            popup.innerHTML = message; // 使用 innerHTML 支持 HTML 标签解析
            popup.style.display = 'block';  // 显示弹窗
            popup.style.left = event.pageX + 10 + 'px';  // 设置弹窗的X坐标
            popup.style.top = event.pageY - 70 + 'px';   // 设置弹窗的Y坐标
        }

        function hidePopup() {
            const popup = document.getElementById('popup');
            popup.style.display = 'none';  // 隐藏弹窗
        }
    </script>
    <div class="signup-footer">
        <div class="pull-center" style="text-align: center;">
            Copyright © 2024-2025 Changan SDA智驾工作组集成开发团队 All Rights Reserved.<br>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {

        // 年度集成版本分布
        var integrated_time_cost_chart = echarts.init(document.getElementById('echarts-bar-chart-integrated-time-cast'));

        // 获取数据并更新图表
        function fetchIntegratedTimeCostData() {
            var url = `/api/C2IntegrationTimeCost/byYears`; // 后端接口路径

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    if (response && response.years && response.releaseCounts && response.totalCounts && response.pubCounts) {
                        // 筛选出最新的5个数据点
                        var years = response.years; // X轴：月份
                        var totalCounts = response.totalCounts; // totalCount 数据
                        var releaseCounts = response.releaseCounts; // releaseCount 数据
                        var pubCounts = response.pubCounts; // pubCount 数据
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 配置 ECharts 柱状图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { type: 'shadow' },
                                formatter: function(params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function(item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['版本总数', '释放成功版本数', '发布成功版本数']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: years, // 横坐标：周
                                axisLabel: {
                                    rotate: 0 // 防止标签过长重叠
                                },
                                boundaryGap: true,  // 横坐标轴留白
                                axisTick: {
                                    alignWithLabel: true
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}' // Y轴不需要百分比符号
                                }
                            },
                            series: [
                                {
                                    name: '版本总数',
                                    data: totalCounts, // Y轴 totalCount 数据
                                    type: 'bar',
                                    stack: null, // 确保不堆叠
                                    itemStyle: {
                                        color: '#5470c6' // 柱子颜色
                                    },
                                    barGap: 0, // 去掉不同系列间的间距
                                    barWidth: '20%' // 控制单个柱子的宽度
                                },
                                {
                                    name: '释放成功版本数',
                                    data: releaseCounts, // Y轴 releaseCount 数据
                                    type: 'bar',
                                    stack: null, // 确保不堆叠
                                    itemStyle: {
                                        color: '#91cc75' // 柱子颜色
                                    },
                                    barGap: 0, // 去掉不同系列间的间距
                                    barWidth: '20%' // 控制单个柱子的宽度
                                },
                                {
                                    name: '发布成功版本数',
                                    data: pubCounts, // Y轴 pubCount 数据
                                    type: 'bar',
                                    stack: null, // 确保不堆叠
                                    itemStyle: {
                                        color: '#fac858' // 柱子颜色
                                    },
                                    barGap: 0, // 去掉不同系列间的间距
                                    barWidth: '20%' // 控制单个柱子的宽度
                                }
                            ],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    type: "slider",
                                    backgroundColor: "rgb(255, 255, 255)", // 设置背景颜色
                                    fillerColor: "rgb(16, 171, 198)", // 设置选中范围的填充颜色
                                    borderColor: "rgb(255, 255, 255)", // 设置边框颜色
                                    showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息
                                    startValue: startValue, // 数据窗口范围的起始数值
                                    endValue: endValue, // 数据窗口范围的结束数值
                                    filterMode: "empty", // 过滤模式
                                    width: "50%", // 滚动条宽度
                                    height: 8, // 滚动条高度
                                    left: "center", // 设置滚动条显示位置
                                    zoomLock: false, // 锁定选择区域大小
                                    handleSize: 0, // 控制手柄的尺寸
                                    bottom: 3, // 设置滚动条底部位置
                                },
                                {
                                    // 内部滚动条配置
                                    type: "inside", // 使用内部滚动条
                                    zoomOnMouseWheel: true, // 鼠标滚轮触发缩放
                                    moveOnMouseMove: true, // 鼠标拖动时触发滚动
                                    moveOnMouseWheel: true, // 鼠标滚轮触发滚动
                                }
                            ]
                        };

                        // 更新图表
                        integrated_time_cost_chart.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function() {
                    console.error('获取数据失败');
                }
            });
        }
        // 调用函数获取数据并渲染图表
        fetchIntegratedTimeCostData();

        // 设置定时刷新（如需）
        setInterval(fetchIntegratedTimeCostData, 5000);





        // 当天流水线运行情况
        const chartC2PipelineRunningStatus = echarts.init(document.getElementById('echartsC2PipelineRunningStatus'));

        // 定义默认的分类项（强制排序）
        const defaultCICDNames = ['C2M', 'E2E', 'C3B'];

        function refreshC2PipelineRunningStatus() {
            // 发送请求获取后端数据
            fetch('/api/C2PipelineRunningStatus/byDay')
                .then(response => {
                    // 解析返回的 JSON 数据
                    return response.json();
                })
                .then(data => {
                    // 打印获取的数据以便调试
                    console.log("Fetched Data:", data);

                    // 初始化数据结构 mergedData
                    const mergedData = {};
                    defaultCICDNames.forEach(name => {
                        mergedData[name] = {
                            completed: 0,
                            planned: []
                        }; // 每个默认分类都有初始化值
                    });

                    // 遍历后端返回的数据，更新 mergedData
                    Object.keys(data).forEach(name => {
                        mergedData[name] = {
                            completed: data[name]?.completed || 0,
                            planned: data[name]?.planned || []
                        };
                    });

                    // 根据 defaultCICDNames 的顺序提取数据
                    const filteredData = defaultCICDNames.map(name => {
                        return mergedData[name];
                    });

                    // 提取完成版本的数量
                    const completedCounts = filteredData.map(stats => {
                        return stats.completed;
                    });

                    // 提取计划版本的数量
                    const plannedCounts = filteredData.map(stats => {
                        return stats.planned.length;
                    });

                    // 生成计划版本的详细信息
                    const plannedDetails = defaultCICDNames.map(name => {
                        const planned = mergedData[name]?.planned || [];
                        if (planned.length > 0) {
                            return planned
                                .map(item => {
                                    return `${item.versionNo}(剩余${item.timeLeft}分钟)`;
                                })
                                .join(', ');
                        } else {
                            return '无计划版本';
                        }
                    });

                    // 配置 ECharts 图表的选项
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow' // 坐标轴指示器类型为阴影
                            }
                        },
                        legend: {
                            data: ['实际完成版本', '计划完成版本'],
<!--                            top: '10%' // 图例位置-->
                        },
                        grid: {
                            top: '20%',
                            left: '5%',
                            right: '20%', // 图表右侧留白
                            bottom: '5%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value', // 数值轴
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category', // 分类轴
                            data: defaultCICDNames // Y 轴数据来源
                        },
                        series: [
                            {
                                name: '实际完成版本',
                                type: 'bar', // 柱状图
                                stack: 'total', // 堆叠效果
                                data: completedCounts, // 实际完成版本的数据
                                itemStyle: {
                                    color: '#0582ca' // 设置计划完成版本柱子的颜色为灰色
                                }
                            },
                            {
                                name: '计划完成版本',
                                type: 'bar', // 柱状图
                                stack: 'total', // 堆叠效果
                                data: plannedCounts, // 计划完成版本的数据
                                itemStyle: {
                                    color: '#B0B0B0' // 设置计划完成版本柱子的颜色为灰色
                                }
                            }
                        ],
                        graphic: defaultCICDNames.map((name, index) => {
                            return {
                                type: 'text', // 文本类型
                                left: 'right', // 靠右对齐
                                top: `${20 * index + 30}px`, // 纵向位置
                                style: {
                                    text: `${name}: ${plannedDetails[index]}`, // 文本内容
                                    fill: '#333', // 文本颜色
                                    font: '12px sans-serif' // 文本样式
                                }
                            };
                        })
                    };

                    // 更新 ECharts 图表
                    chartC2PipelineRunningStatus.setOption(option, true);
                })
                .catch(error => {
                    // 捕获和打印错误信息
                    console.error('Error fetching data:', error);
                });
        }
        // 页面加载时立即刷新一次
        refreshC2PipelineRunningStatus();
        // 每隔 5 秒刷新一次
        setInterval(refreshC2PipelineRunningStatus, 5000);






        // 代码提交人姓名云图
        var barChartCodeSubmitterCloud = echarts.init(document.getElementById('echartsCodeSubmitterCloud'));

        // 从后端获取数据并绘制图表
        function fetchTop10CloudData() {
            $.ajax({
                url: '/api/C2CodeSubmitterCloud/byMonth',
                type: 'GET',
                success: function(response) {
                    if (response) {
                        // 处理后端返回的数据并排序
                        var data = response.map(function(item) {
                            return {
                                name: item.moduleName,
                                value: item.count,
                            };
                        }).sort((a, b) => b.value - a.value); // 按值降序排序

                        console.log('Processed Data:', data); // 调试打印

                        // 配置词云图选项
                        var option = {
                            tooltip: {
                                show: true,
                                formatter: function (params) {
                                    return params.name + ": " + params.value;
                                }
                            },
                            series: [{
                                type: 'wordCloud',
                                sizeRange: [10, 40],  // 调整字体大小范围
                                rotationRange: [-45, 45],  // 限制旋转角度
                                shape: 'circle',  // 圆形布局
                                gridSize: 2,  // 减少间距
                                drawOutOfBound: false,
                                textStyle: {
                                    fontFamily: 'sans-serif',
                                    fontWeight: 'bold',
                                    color: function () {
                                        return 'rgb(' + [
                                            Math.round(Math.random() * 255),
                                            Math.round(Math.random() * 255),
                                            Math.round(Math.random() * 255)
                                        ].join(',') + ')';
                                    }
                                },
                                data: data // 不再使用 slice()
                            }]
                        };

                        // 设置并显示图表
                        barChartCodeSubmitterCloud.setOption(option);
                    } else {
                        console.error('未能获取到数据');
                    }
                },
                error: function() {
                    console.error('数据请求失败');
                }
            });
        }


        // 默认加载数据
        fetchTop10CloudData();

        // 你可以根据需要设置定时器来自动刷新图表
        setInterval(function() {
            fetchTop10CloudData();
        }, 5000); // 每5秒刷新一次



        // 集成组版流水线成功率
        var chartC2PipeSucRate = echarts.init(document.getElementById('echartsC2PipeSucRate'));

        // 获取数据并更新图表
        function fetchC2PipeSucRateData(period) {
            var url = `/api/C2PipeSucRate/byYears`; // 后端接口
            var params = { period: period }; // 根据需要添加查询参数

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function (response) {
                    if (response && response.timePeriods && response.nodeSuccessRates) {
                        // 准备数据
                        var years = response.timePeriods.year; // 周数据
                        var nodeSuccessRates = response.nodeSuccessRates;

                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 格式化周数据为 "2024第45周"
                        var formattedYears = years.map(function (year) {
                           // var year = week.substring(0, 4); // 获取年份
                            var yearNumber = year.substring(4); // 获取周数
                           // return `${year}第${weekNumber}周`;
                            return `${year}`;
                        });

                        // 创建 legend 和 series 数组
                        var legendData = [];
                        var seriesData = [];

                        // 遍历每个 nodeName，构建 legend 和 series 数据
                        for (var nodeName in nodeSuccessRates) {
                            if (nodeSuccessRates.hasOwnProperty(nodeName)) {
                                // 添加 legend
                                legendData.push(nodeName);
                                // 添加对应的 series 数据
                                seriesData.push({
                                    name: nodeName,
                                    type: 'line',
                                    data: nodeSuccessRates[nodeName],
                                    smooth: true,
                                    lineStyle: {
                                        width: 2 // 设置折线宽度
                                    },
                                    itemStyle: {
                                        color: getLineColor(nodeName) // 根据 nodeName 设置不同的颜色
                                    }
                                });
                            }
                        }

                        // 配置 ECharts 折线图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function (item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: legendData // 动态添加 legend 数据
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: formattedYears, // 使用格式化后的周数据
                                axisLabel: {
                                    rotate: 0, // 旋转标签防止过长重叠
                                    formatter: function (value) {
                                        return value; // 显示格式化后的周
                                    }
                                },
                                fontSize: 8 // 设置字体大小为 8px，默认单位为px
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴添加百分比符号
                                }
                            },
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(16, 171, 198)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ],
                            series: seriesData // 多条折线图
                        };

                        // 设置图表
                        chartC2PipeSucRate.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function () {
                    console.error('获取数据失败');
                }
            });
        }

        // 默认加载周数据
        fetchC2PipeSucRateData('week');

        // 你可以根据需要设置定时器来自动刷新图表
        setInterval(function () {
            fetchC2PipeSucRateData('week');
        }, 5000); // 每5秒刷新一次

        // 根据 nodeName 返回不同的颜色
        function getLineColor(nodeName) {
            // 这里可以根据 nodeName 返回不同的颜色，示例用随机颜色
            var colors = {
                'CICD_C2_MCU': '#4CAF50', // 绿色
                'CICD_SOC_SDK': '#FF9800', // 橙色
<!--                'CICD_C2_SOC': '#2196F3', // 蓝色-->
                'CICD_C2_SOC': '#ff0000', // 蓝色
                'CICD_SOC_APP': '#F44336'  // 红色
            };
            return colors[nodeName] || '#000000'; // 默认黑色
        }




<!--        // 流水线组版成功率-->
<!--        var chartC2PipeSucRate = echarts.init(document.getElementById('echartsC2PipeSucRate'));-->

<!--        // 获取数据并更新图表-->
<!--        function fetchC2PipeSucRateData(period) {-->
<!--            var url = `/api/C2PipeSucRate/byWeeks`; // 后端接口-->
<!--            var params = { period: period }; // 可根据需要添加查询参数-->

<!--            // 调用后端接口获取数据-->
<!--            $.ajax({-->
<!--                url: url,-->
<!--                type: 'GET',-->
<!--                data: params,-->
<!--                success: function (response) {-->
<!--                    if (response && response.timePeriods && response.nodeSuccessRates) {-->
<!--                        // 准备数据-->
<!--                        var months = response.timePeriods.month;-->
<!--                        var nodeSuccessRates = response.nodeSuccessRates;-->

<!--                        // 创建 legend 和 series 数组-->
<!--                        var legendData = [];-->
<!--                        var seriesData = [];-->

<!--                        // 遍历每个 nodeName，构建 legend 和 series 数据-->
<!--                        for (var nodeName in nodeSuccessRates) {-->
<!--                            if (nodeSuccessRates.hasOwnProperty(nodeName)) {-->
<!--                                // 添加 legend-->
<!--                                legendData.push(nodeName);-->
<!--                                // 添加对应的 series 数据-->
<!--                                seriesData.push({-->
<!--                                    name: nodeName,-->
<!--                                    type: 'line',-->
<!--                                    data: nodeSuccessRates[nodeName],-->
<!--                                    smooth: true,-->
<!--                                    lineStyle: {-->
<!--                                        width: 2 // 设置折线宽度-->
<!--                                    },-->
<!--                                    itemStyle: {-->
<!--                                        color: getLineColor(nodeName) // 根据 nodeName 设置不同的颜色-->
<!--                                    }-->
<!--                                });-->
<!--                            }-->
<!--                        }-->

<!--                        // 配置 ECharts 折线图-->
<!--                        var option = {-->
<!--                            tooltip: {-->
<!--                                trigger: 'axis',-->
<!--                                formatter: function (params) {-->
<!--                                    var tooltip = `${params[0].axisValue}<br>`;-->
<!--                                    params.forEach(function (item) {-->
<!--                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;-->
<!--                                    });-->
<!--                                    return tooltip;-->
<!--                                }-->
<!--                            },-->
<!--                            legend: {-->
<!--                                data: legendData // 动态添加 legend 数据-->
<!--                            },-->
<!--                            grid: {-->
<!--                                left: '10%',  // 左边距调整为10%或适当的像素值，如 '50px'-->
<!--                                right: '5%',  // 右边距保持默认或根据需要调整-->
<!--                                top: '20%',   // 上边距-->
<!--                                bottom: '15%' // 下边距-->
<!--                            },-->
<!--                            xAxis: {-->
<!--                                type: 'category',-->
<!--                                data: months, // X轴为月份-->
<!--                                axisLabel: {-->
<!--                                    rotate: 30, // 旋转标签防止过长重叠-->
<!--                                    formatter: function (value) {-->
<!--                                        return value; // 可根据需求格式化日期-->
<!--                                    }-->
<!--                                }-->
<!--                            },-->
<!--                            yAxis: {-->
<!--                                type: 'value',-->
<!--                                axisLabel: {-->
<!--                                    formatter: '{value} %' // Y轴添加百分比符号-->
<!--                                }-->
<!--                            },-->
<!--                            series: seriesData // 多条折线图-->
<!--                        };-->

<!--                        // 设置图表-->
<!--                        chartC2PipeSucRate.setOption(option);-->
<!--                    } else {-->
<!--                        console.error('无数据返回');-->
<!--                    }-->
<!--                },-->
<!--                error: function () {-->
<!--                    console.error('获取数据失败');-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // 默认加载月数据-->
<!--        fetchC2PipeSucRateData('month');-->

<!--        // 你可以根据需要设置定时器来自动刷新图表-->
<!--        setInterval(function () {-->
<!--            fetchC2PipeSucRateData('month');-->
<!--        }, 5000); // 每5秒刷新一次-->

<!--        // 根据 nodeName 返回不同的颜色-->
<!--        function getLineColor(nodeName) {-->
<!--            // 这里可以根据 nodeName 返回不同的颜色，示例用随机颜色-->
<!--            var colors = {-->
<!--                'CICD_C2_MCU': '#4CAF50', // 绿色-->
<!--                'CICD_SOC_SDK': '#FF9800', // 橙色-->
<!--                'CICD_C2_SOC': '#2196F3', // 蓝色-->
<!--                'CICD_SOC_APP': '#F44336'  // 红色-->
<!--            };-->
<!--            return colors[nodeName] || '#000000'; // 默认黑色-->
<!--        }-->





        // 集成组版失败问题分布
        var chartC2IntegrationFailedDist = echarts.init(document.getElementById('echarts-C2IntegrationFailedDist'));

        // 饼状图的初始配置
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'  // 显示名称、数值和百分比
            },
            legend: {
                orient: 'horizontal',  // 图例垂直排列
                top: '1%',  // 图例距离顶部的距离
                right: '5%',  // 图例距离右侧的距离
                data: []  // 初始化时没有数据，稍后更新
            },
            grid: {
                left: '10%',  // 左边距调整为10%或适当的像素值，如 '50px'
                right: '5%',  // 右边距保持默认或根据需要调整
                top: '20%',   // 上边距
                bottom: '10%' // 下边距
            },
            series: [
                {
                    name: 'Failures',
                    type: 'pie',
                    radius: '50%',
                    center: ['25%', '75%'],  // 将饼图的中心位置设置到左下角
                    data: [],  // 初始化时没有数据，稍后更新
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        position: 'outside',  // 标签外部显示
                        formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                        align: 'left',  // 标签左对齐
                        distance: 10,  // 标签与饼图的距离
                        fontSize: 12
                    }
                }
            ]
        };

        // 设置图表
        chartC2IntegrationFailedDist.setOption(option);

        // 定时刷新数据并更新图表
        function updateChartData() {
            $.ajax({
                url: '/api/C2IntegrationFailedDist/byAll',  // 后端接口路径
                method: 'GET',
                success: function(response) {
                    // 根据数据值对数据进行排序
                    var pieData = Object.keys(response).map(function(party) {
                        return { name: party, value: response[party] };
                    });

                    // 按照比重排序，值越大排在前面
                    pieData.sort(function(a, b) {
                        return b.value - a.value;  // 降序排列
                    });

                    // 更新 ECharts 图表配置
                    chartC2IntegrationFailedDist.setOption({
                        legend: {
                            data: pieData.map(function(item) {
                                return item.name;  // 更新 legend，按照排序后的数据
                            })
                        },
                        series: [
                            {
                                name: '失败占比',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '62%'],  // 设置饼图的中心位置
                                data: pieData,  // 更新数据
                                label: {
                                    position: 'outside',  // 标签外部显示
                                    formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                                    align: 'left',  // 标签左对齐
                                    distance: 10,  // 标签与饼图的距离
                                    fontSize: 13
                                },
                                labelLine: {
                                    length: 20,  // 标签线的长度
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            }
                        ]
                    });
                },
                error: function(error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // 默认加载数据并启动定时刷新
        updateChartData();  // 页面加载时调用一次
        setInterval(updateChartData, 5000);  // 每5秒钟自动刷新一次



        // C2部署失败问题分布
        var chartC2DeployFailedDist = echarts.init(document.getElementById('echartsC2DeployFailedDist'));

        // 饼状图的初始配置
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'  // 显示名称、数值和百分比
            },
            legend: {
                orient: 'horizontal',  // 图例垂直排列
                top: '1%',  // 图例距离顶部的距离
                right: '5%',  // 图例距离右侧的距离
                data: []  // 初始化时没有数据，稍后更新
            },
            grid: {
                left: '10%',  // 左边距调整为10%或适当的像素值，如 '50px'
                right: '5%',  // 右边距保持默认或根据需要调整
                top: '20%',   // 上边距
                bottom: '10%' // 下边距
            },
            series: [
                {
                    name: 'Failures',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],  // 将饼图的中心位置设置到左下角
                    data: [],  // 初始化时没有数据，稍后更新
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        position: 'outside',  // 标签外部显示
                        formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                        align: 'left',  // 标签左对齐
                        distance: 10,  // 标签与饼图的距离
                        fontSize: 12
                    }
                }
            ]
        };

        // 设置图表
        chartC2DeployFailedDist.setOption(option);

        // 定时刷新数据并更新图表
        function updateDeployFaildChartData() {
            $.ajax({
                url: '/api/C2DeployFailedDist/byAll',  // 后端接口路径
                method: 'GET',
                success: function(response) {
                    // 根据数据值对数据进行排序
                    var pieData = Object.keys(response).map(function(party) {
                        return { name: party, value: response[party] };
                    });

                    // 按照比重排序，值越大排在前面
                    pieData.sort(function(a, b) {
                        return b.value - a.value;  // 降序排列
                    });

                    // 更新 ECharts 图表配置
                    chartC2DeployFailedDist.setOption({
                        legend: {
                            data: pieData.map(function(item) {
                                return item.name;  // 更新 legend，按照排序后的数据
                            })
                        },
                        series: [
                            {
                                name: '失败占比',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '62%'],  // 设置饼图的中心位置
                                data: pieData,  // 更新数据
                                label: {
                                    position: 'outside',  // 标签外部显示
                                    formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                                    align: 'left',  // 标签左对齐
                                    distance: 10,  // 标签与饼图的距离
                                    fontSize: 13
                                },
                                labelLine: {
                                    length: 20,  // 标签线的长度
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            }
                        ]
                    });
                },
                error: function(error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // 默认加载数据并启动定时刷新
        updateDeployFaildChartData();  // 页面加载时调用一次
        setInterval(updateDeployFaildChartData, 5000);  // 每5秒钟自动刷新一次




        // 集成组版准点率
        var echart_C2IntegratedOnTimeRate = echarts.init(document.getElementById('echarts-C2IntegratedOnTimeRate'));

        // 获取数据并更新图表
        function fetchC2IntegratedOnTimeRateData(period) {
            var url = `/api/C2IntegratedOnTimeRate/byYears`;  // 后端接口路径
            var params = { period: period }; // 根据需要添加查询参数

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function(response) {
                    if (response && response.timePeriods && response.percentages) {
                        // 准备数据
                        var years = response.timePeriods.year; // X轴：月份
                        var percentages = response.percentages; // Y轴：C2_SOC status=1 的百分比
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 配置 ECharts 折线图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function(item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['集成准点率']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: years,  // X轴为月份
                                axisLabel: {
                                    rotate: 0, // 旋转标签防止过长重叠
                                    formatter: function(value) {
                                        return value; // 可以根据需求格式化日期
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴添加百分比符号
                                }
                            },
                            series: [{
                                name: '集成准点率',
                                data: percentages,  // Y轴为C2_SOC 状态为 1 的百分比
                                type: 'line',  // 折线图
                                smooth: true,  // 平滑曲线
                                lineStyle: {
                                    width: 2 // 设置折线宽度
                                },
                                itemStyle: {
                                    color: '#ff0000' // 折线颜色（你可以修改颜色）
                                }
                            }],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(16, 171, 198)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ]
                        };

                        // 更新图表
                        echart_C2IntegratedOnTimeRate.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function() {
                    console.error('获取数据失败');
                }
            });
        }

        // 默认加载月度数据
        fetchC2IntegratedOnTimeRateData('week');

        // 你可以根据需要设置定时器来自动刷新图表
        setInterval(function() {
            fetchC2IntegratedOnTimeRateData('week');
        }, 5000);  // 每5秒刷新一次数据




        // 代码提交活动排行榜
        var chartTop10FullName = echarts.init(document.getElementById('echartsCodeSubmissionActivityRanking'));

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                formatter: function (params) {
                    let tooltipContent = params.map(item => {
                        if (item.seriesName === '打Tag次数') {
                            // 还原放大的 Release Count 数据
                            return `${item.seriesName}: ${Math.abs(item.value / 2)}`;
                        }
                        return `${item.seriesName}: ${item.value}`;
                    });
                    return tooltipContent.join('<br/>');
                }
            },
            legend: {
                data: ['打Tag次数', '代码提交次数'],
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value',
                    splitLine: { show: true },
                    axisLabel: {
                        formatter: function (value) {
                            return Math.abs(value); // 显示绝对值
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: [], // 初始化无数据
                    axisLabel: {
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                }
            ],
            series: [
                {
                    name: '打Tag次数',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: function (params) {
                            // 还原放大的 Release Count 数据
                            return Math.abs(params.value / 2);
                        }
                    },
                    emphasis: { focus: 'series' },
                    data: [] // 初始化无数据
                },
                {
                    name: '代码提交次数',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'insideRight',
                        formatter: function (params) {
                            return params.value; // 显示正数
                        }
                    },
                    emphasis: { focus: 'series' },
                    data: [] // 初始化无数据
                }
            ]
        };

        // 设置图表初始配置
        chartTop10FullName.setOption(option);

        // 更新数据的逻辑保持不变
        function updateTop10ChartData() {
            $.ajax({
                url: '/api/C2CodeSubmissionActivityRanking/releaseByMonth',
                method: 'GET',
                success: function (response) {
                    if (response.success && response.data) {
                        var categories = response.data.map(item => item.moduleName);
                        var releaseCounts = response.data.map(item => -item.releaseCount * 2); // 放大 Release Count 数据
                        var mergeCounts = response.data.map(item => item.mergeCount);

                        chartTop10FullName.setOption({
                            yAxis: {
                                data: categories.reverse() // Y轴类别反向排列
                            },
                            series: [
                                {
                                    name: '打Tag次数',
                                    data: releaseCounts.reverse() // 数据反向排列
                                },
                                {
                                    name: '代码提交次数',
                                    data: mergeCounts.reverse() // 数据反向排列
                                }
                            ]
                        });
                    } else {
                        console.error('Error in response:', response.message);
                    }
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // 默认加载一次数据
        updateTop10ChartData();

        // 每隔5秒刷新数据
        setInterval(updateTop10ChartData, 5000);



        // C2部署成功率
        var chartC2DeploySucRate = echarts.init(document.getElementById('echarts-C2DeploySucRate'));

        // 获取数据并更新图表
        function fetchC2DeploySucRate(period) {
            var url = `/api/C2DeploySucRate/byYears`; // 修改为按周的数据接口路径
            var params = { period: period };  // 查询参数，可根据需要扩展

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function (response) {
                    if (response && response.timePeriods && response.percentages) {
                        // 数据解析
                        var years = response.timePeriods.year; // X轴数据（周）
                        var percentages = response.percentages;   // Y轴数据（百分比）
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 格式化周数据为 "第45周" 这样的格式
                        var formattedYears = years.map(function (year) {
                            var year = year.substring(0, 4); // 获取年份
                            var yearNumber = year.substring(5); // 获取周数
                            return `${year}`;  // 返回格式化后的周数
                        });

                        // 配置 ECharts 折线图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function (item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['C2版本部署成功率']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: formattedYears,  // 使用格式化后的周数据
                                axisLabel: {
                                    rotate: 0, // 旋转标签以防止重叠
                                    formatter: function (value) {
                                        return value; // 直接使用格式化后的值
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴百分比显示
                                },
                                nameLocation: 'middle',
                                nameGap: 40
                            },
                            series: [{
                                name: 'C2版本部署成功率',
                                data: percentages, // Y轴数据
                                type: 'line',  // 折线图类型
                                smooth: true,  // 平滑曲线
                                lineStyle: {
                                    width: 2 // 折线宽度
                                },
                                itemStyle: {
                                    color: '#ff0000' // 折线颜色
                                }
                            }],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(16, 171, 198)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ]
                        };

                        // 更新图表
                        chartC2DeploySucRate.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function () {
                    console.error('获取数据失败');
                }
            });
        }

        // 默认加载按周统计数据
        fetchC2DeploySucRate('week');

        // 设置定时刷新（每5秒刷新一次）
        setInterval(function () {
            fetchC2DeploySucRate('week');
        }, 5000);

        // 响应窗口调整
        window.addEventListener('resize', function () {
            chartC2DeploySucRate.resize();
        });




        // 集成冒烟失败问题分布
        var chartC2IntegrationSmokeFailedDist = echarts.init(document.getElementById('echartsC2IntegrationSmokeFailedDist'));

        // 饼状图的初始配置
        var optionSmokeFailedDist = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示名称、数值和百分比
            },
            legend: {
                orient: 'horizontal',  // 图例横向排列
                top: '1%',  // 图例距离顶部的距离
                right: '5%',  // 图例距离右侧的距离
                data: []  // 初始化时没有数据，稍后更新
            },
            series: [
                {
                    name: 'Failures',
                    type: 'pie',
                    radius: '50%',
                    center: ['25%', '75%'],  // 将饼图的中心位置设置到左下角
                    data: [],  // 初始化时没有数据，稍后更新
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        position: 'outside',  // 标签外部显示
                        formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                        align: 'left',  // 标签左对齐
                        distance: 10,  // 标签与饼图的距离
                        fontSize: 12
                    },
                    labelLine: {
                        length: 20,  // 标签线的长度
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                }
            ]
        };

        // 设置图表
        chartC2IntegrationSmokeFailedDist.setOption(optionSmokeFailedDist);

        // 定时刷新数据并更新图表
        function updateSmokeFailedChartData() {
            $.ajax({
                url: '/api/C2IntegrationSmokeFailedDist/byAll',  // 后端接口路径
                method: 'GET',
                success: function(response) {
                    // 根据数据值对数据进行排序
                    var pieData = Object.keys(response).map(function(party) {
                        return { name: party, value: response[party] };
                    });

                    // 按照比重排序，值越大排在前面
                    pieData.sort(function(a, b) {
                        return b.value - a.value;  // 降序排列
                    });

                    // 更新 ECharts 图表配置
                    chartC2IntegrationSmokeFailedDist.setOption({
                        legend: {
                            data: pieData.map(function(item) {
                                return item.name;  // 更新 legend，按照排序后的数据
                            })
                        },
                        series: [
                            {
                                name: '失败占比',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '62%'],  // 设置饼图的中心位置
                                data: pieData,  // 更新数据
                                label: {
                                    position: 'outside',  // 标签外部显示
                                    formatter: '{b}: {d}%',  // 显示标签格式，名称和百分比
                                    align: 'left',  // 标签左对齐
                                    distance: 10,  // 标签与饼图的距离
                                    fontSize: 13
                                },
                                labelLine: {
                                    length: 20,  // 标签线的长度
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            }
                        ]
                    });
                },
                error: function(error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // 默认加载数据并启动定时刷新
        updateSmokeFailedChartData();  // 页面加载时调用一次
        setInterval(updateSmokeFailedChartData, 5000);  // 每 5 秒刷新一次数据




        // c2版本释放准点率
        var c2_release_ontime_rate_chart = echarts.init(document.getElementById('echarts-line-chart-c2_release_ontime_rate'));

        // 获取数据并更新图表
        function fetchC2ReleaseOnTimeRateData(period) {
            var url = `/api/C2ReleaseOnTimeRate/byYears`;  // 后端接口路径
            var params = { period: period };  // 查询参数，如果有额外的筛选条件可以加在这里

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function(response) {
                    if (response && response.timePeriods && response.percentages) {
                        // 准备数据
                        var years = response.timePeriods.year; // X轴：月份
                        var percentages = response.percentages; // Y轴：百分比
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 配置 ECharts 折线图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function(item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['C2版本释放准点率']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: years,  // X轴为月份
                                axisLabel: {
                                    rotate: 0, // 旋转标签防止过长重叠
                                    formatter: function(value) {
                                        return value; // 可根据需求格式化日期
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴添加百分比符号
                                }
                            },
                            series: [{
                                name: 'C2版本释放准点率',
                                data: percentages,  // Y轴为C2版本释放准点率百分比
                                type: 'line',  // 折线图
                                smooth: true,  // 平滑曲线
                                lineStyle: {
                                    width: 2 // 设置折线宽度
                                },
                                itemStyle: {
                                    color: '#ff0000' // 折线颜色
                                }
                            }],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(69, 139, 0)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ]
                        };

                        // 更新图表
                        c2_release_ontime_rate_chart.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function() {
                    console.error('获取数据失败');
                }
            });
        }
        // 默认加载月度数据
        fetchC2ReleaseOnTimeRateData('month');

        // 你可以根据需要设置定时器来自动刷新图表
        setInterval(function() {
            fetchC2ReleaseOnTimeRateData('month');
        }, 5000);  // 5秒刷新一次数据




        // 当天模块待释放情况监控
        const chartsC2ModuleToBeReleasedDetail = echarts.init(document.getElementById('echartsC2ModuleToBeReleasedDetail'));

        // 函数：加载并展示数据
        function loadAndDisplayData() {
            $.ajax({
                url: '/api/C2ModuleToBeReleasedDetail/byDay', // 替换为你的接口地址
                method: 'GET',
                success: function (data) {
                    updateChart(data);
                },
                error: function (error) {
                    console.error('Error loading data:', error);
                }
            });
        }

        // 函数：更新图表内容
        function updateChart(data) {
            const content = [];
            const maxTitles = 4; // 最多展示 4 个版本
            let titleCount = 0; // 记录已展示的标题数量
            let topPosition = 0; // 控制每个文本框的位置

            // 遍历数据，限制最多展示两个版本
            for (const [versionName, modules] of Object.entries(data)) {
                if (titleCount >= maxTitles) break; // 超过 2 个版本则退出

                // 添加版本标题
                content.push({
                    type: 'text',
                    style: {
                        text: versionName,
                        fontSize: 12, // 设置标题字体大小
                        fontWeight: 'bold',
                        color: '#bee9e8',
                        textAlign: 'center',
                        textVerticalAlign: 'middle'
                    },
                    left: 'center',
                    top: `${topPosition + 2}%`
                });

                topPosition += 10; // 距离下一行文本的垂直偏移

                // 遍历模块信息
                modules.forEach((module, index) => {
                    content.push({
                        type: 'text',
                        style: {
                            text: `${module.moduleName} | ${module.moduleVersionName} | ${module.fullName}`,
                            fontSize: 10,
                            color: '#bee9e8',
                            textAlign: 'center',
                            textVerticalAlign: 'middle'
                        },
                        left: 'center',
                        top: `${topPosition + index * 6}%` // 每个模块信息有一定的垂直间隔
                    });
                });

                topPosition += modules.length * 5 + 3; // 根据模块数量调整顶部位置
                content.push({
                    type: 'text',
                    style: {
        <!--                text: '———————————',-->
                        fontSize: 8,
                        color: '#aaa',
                        textAlign: 'center',
                        textVerticalAlign: 'middle'
                    },
                    left: 'center',
                    top: `${topPosition}%`
                });

                topPosition += 2; // 为下一部分内容预留空白
                titleCount++;
            }

            // 设置图表选项
            const option = {
                backgroundColor: '#bee9e8', // 设置背景色
                graphic: content, // 渲染文本内容
                tooltip: {
                    show: true
                },
                xAxis: {
                    type: 'category',
                    show: false // 隐藏 X 轴
                },
                yAxis: {
                    type: 'value',
                    show: false // 隐藏 Y 轴
                },
                series: [{
                    type: 'scatter',
                    data: [], // 空数据仅为了触发图表渲染
                    symbolSize: 0 // 不显示图标
                }]
            };

            // 更新图表内容
            chartsC2ModuleToBeReleasedDetail.setOption(option);
        }

        // 初始化时加载数据
        loadAndDisplayData();

        // 每隔 5 秒自动刷新数据
        setInterval(loadAndDisplayData, 5000);




<!--         // 当天模块待释放模块详情-->
<!--        const chartsC2ModuleToBeReleasedDetail = echarts.init(document.getElementById('echartsC2ModuleToBeReleasedDetail'));-->

<!--        // 函数：加载并展示数据-->
<!--        function loadAndDisplayData() {-->
<!--            $.ajax({-->
<!--                url: '/api/C2ModuleToBeReleasedDetail/byDay', // 替换为你的接口地址-->
<!--                method: 'GET',-->
<!--                success: function (data) {-->
<!--                    updateChart(data);-->
<!--                },-->
<!--                error: function (error) {-->
<!--                    console.error('Error loading data:', error);-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // 函数：更新图表内容-->
<!--        function updateChart(data) {-->
<!--            const content = [];-->
<!--            const maxTitles = 2; // 最多展示 5 个版本-->
<!--            let titleCount = 0; // 记录已展示的标题数量-->

<!--            // 遍历数据，限制最多展示五个 title-->
<!--            for (const [versionName, modules] of Object.entries(data)) {-->
<!--                if (titleCount >= maxTitles) break; // 超过 5 个版本则退出-->

<!--                // 添加版本标题-->
<!--                content.push(`{title|${versionName}}`);-->

<!--                // 遍历模块信息-->
<!--                modules.forEach(module => {-->
<!--                    content.push(-->
<!--                        `{moduleName|${module.moduleName}} | ` +-->
<!--                        `{moduleVersionName|${module.moduleVersionName}} | ` +-->
<!--                        `{personInCharge|${module.fullName}}`-->
<!--                    );-->
<!--                });-->

<!--                // 添加分隔线-->
<!--                content.push(`{divider|———}`);-->
<!--                titleCount++;-->
<!--            }-->

<!--            // 设置图表选项-->
<!--            const option = {-->
<!--                tooltip: {-->
<!--                    show: true-->
<!--                },-->
<!--                color: ['#ff9999', '#66b3ff', '#99ff99', '#ffcc99'], // 自定义颜色-->
<!--                series: [-->
<!--                    {-->
<!--                        type: 'pie', // 利用 Pie 图的富文本功能实现-->
<!--                        radius: ['0%', '100%'], // 不显示饼图，仅作为容器-->
<!--                        label: {-->
<!--                            show: true,-->
<!--                            position: 'center',-->
<!--                            formatter: content.join('\n'), // 拼接内容-->
<!--                            rich: {-->
<!--                                title: {-->
<!--                                    fontSize: 14, // 调整标题字体大小-->
<!--                                    fontWeight: 'bold',-->
<!--                                    color: '#333',-->
<!--                                    padding: [6, 0]-->
<!--                                },-->
<!--                                moduleName: {-->
<!--                                    fontSize: 12, // 调整模块名称字体大小-->
<!--                                    color: '#555'-->
<!--                                },-->
<!--                                moduleVersionName: {-->
<!--                                    fontSize: 12, // 调整版本名称字体大小-->
<!--                                    color: '#888'-->
<!--                                },-->
<!--                                personInCharge: {-->
<!--                                    fontSize: 12, // 调整负责人字体大小-->
<!--                                    color: '#666'-->
<!--                                },-->
<!--                                divider: {-->
<!--                                    fontSize: 12, // 调整分割线字体大小-->
<!--                                    color: '#aaa',-->
<!--                                    padding: [2, 0]-->
<!--                                }-->
<!--                            }-->
<!--                        },-->
<!--                        data: [1] // 必须指定一个数据项-->
<!--                    }-->
<!--                ]-->
<!--            };-->

<!--            // 更新图表内容-->
<!--            chartsC2ModuleToBeReleasedDetail.setOption(option);-->
<!--        }-->

<!--        // 初始化时加载数据-->
<!--        loadAndDisplayData();-->

<!--        // 每隔 5 秒自动刷新数据-->
<!--        setInterval(loadAndDisplayData, 5000);-->




       // C2版本释放成功率
       var container = document.getElementById('echarts-line-chart_c2_release_suc_rate');

        // 销毁旧实例
        if (echarts.getInstanceByDom(container)) {
            echarts.dispose(container);
        }

        var c2_release_suc_rate_chart = echarts.init(container);

        // 获取数据并更新图表
        function fetchC2ReleaseSucRateData(period) {
            var url = `/api/C2ReleaseSucRate/byYears`;

            $.ajax({
                url: url,
                type: 'GET',
                data: { period: period },
                success: function (response) {
                    if (response && response.timePeriods && response.percentages) {
                        var years = response.timePeriods.year;  // X轴：月份
                        var percentages = response.percentages;  // Y轴：百分比
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function(item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['C2版本释放成功率']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: years,  // X轴为月份
                                axisLabel: {
                                    rotate: 0, // 旋转标签防止过长重叠
                                    formatter: function(value) {
                                        return value; // 可根据需求格式化日期
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴添加百分比符号
                                }
                            },
                            series: [{
                                name: 'C2版本释放成功率',
                                data: percentages,  // Y轴为C2版本释放成功率百分比
                                type: 'line',  // 折线图
                                smooth: true,  // 平滑曲线
                                lineStyle: {
                                    width: 2 // 设置折线宽度
                                },
                                itemStyle: {
                                    color: '#ff0000' // 折线颜色
                                }
                            }],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(16, 171, 198)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ]
                        };

                        // 更新图表
                        c2_release_suc_rate_chart.setOption(option);
                    } else {
                        console.warn('后端返回数据格式不正确:', response);
                    }
                },
                error: function () {
                    console.error('获取C2版本释放成功率数据失败');
                }
            });
        }

        // 加载默认数据
        fetchC2ReleaseSucRateData('month');

        // 设置定时刷新
        setInterval(function () {
            fetchC2ReleaseSucRateData('month');
        }, 5000); // 每5秒刷新一次







        // C2版本发布成功率
        var chart = echarts.init(document.getElementById('echarts-line-chart-c2-publish-suc-rate'));

        // 获取数据并更新图表
        function fetchc2PublishSucRateData(period) {
            var url = `/api/C2PublishSucRate/byYears`;  // 后端接口
            var params = { period: period };  // 可根据需要添加查询参数

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function(response) {
                    if (response && response.timePeriods && response.percentages) {
                        // 准备数据
                        var years = response.timePeriods.year;
                        var percentages = response.percentages;
                        // 动态计算滚动条范围
                        var totalDataCount = years.length; // 数据总量
                        var visibleDataCount = 5; // 每次显示的数据数量
                        var startValue = Math.max(0, totalDataCount - visibleDataCount); // 起始位置
                        var endValue = totalDataCount - 1; // 结束位置
                        // 配置 ECharts 折线图
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params) {
                                    var tooltip = `${params[0].axisValue}<br>`;
                                    params.forEach(function(item) {
                                        tooltip += `${item.marker}${item.seriesName}: ${item.data}%<br>`;
                                    });
                                    return tooltip;
                                }
                            },
                            legend: {
                                data: ['C2版本发布成功率']
                            },
                            grid: {
                                left: '12%',  // 左边距调整为10%或适当的像素值，如 '50px'
                                right: '5%',  // 右边距保持默认或根据需要调整
                                top: '20%',   // 上边距
                                bottom: '15%' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: years,  // X轴为月份
                                axisLabel: {
                                    rotate: 0, // 旋转标签防止过长重叠
                                    formatter: function(value) {
                                        return value; // 可根据需求格式化日期
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %' // Y轴添加百分比符号
                                }
                            },
                            series: [{
                                name: 'C2版本发布成功率',
                                data: percentages,  // Y轴为C2版本发布成功率百分比
                                type: 'line',  // 折线图
                                smooth: true,  // 平滑曲线
                                lineStyle: {
                                    width: 2 // 设置折线宽度
                                },
                                itemStyle: {
                                    color: '#ff0000' // 折线颜色
                                }
                            }],
                            dataZoom: [
                                {
                                    // 设置滚动条的隐藏与显示
                                    show: true,
                                    // 设置滚动条类型
                                    type: "slider",
                                    // 设置背景颜色
                                    backgroundColor: "rgb(255, 255, 255)",
                                    // 设置选中范围的填充颜色
                                    fillerColor: "rgb(16, 171, 198)",
                                    // 设置边框颜色
                                    borderColor: "rgb(255, 255, 255)",
                                    // 是否显示detail，即拖拽时候显示详细数值信息
                                    showDetail: false,
                                    // 数据窗口范围的起始数值
                                    startValue: startValue,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: endValue,
                                    // empty：当前数据窗口外的数据，被设置为空。
                                    // 即不会影响其他轴的数据范围
                                    filterMode: "empty",
                                    // 设置滚动条宽度，相对于盒子宽度
                                    width: "50%",
                                    // 设置滚动条高度
                                    height: 8,
                                    // 设置滚动条显示位置
                                    left: "center",
                                    // 是否锁定选择区域（或叫做数据窗口）的大小
                                    zoomLoxk: false,
                                    // 控制手柄的尺寸
                                    handleSize: 0,
                                    // dataZoom-slider组件离容器下侧的距离
                                    bottom: 3,
                                },
                                {
                                    // 没有下面这块的话，只能拖动滚动条，
                                    // 鼠标滚轮在区域内不能控制外部滚动条
                                    type: "inside",
                                    // 滚轮是否触发缩放
                                    zoomOnMouseWheel: true,
                                    // 鼠标滚轮触发滚动
                                    moveOnMouseMove: true,
                                    moveOnMouseWheel: true,
                                },
                            ]
                        };

                        // 设置图表
                        chart.setOption(option);
                    } else {
                        console.error('无数据返回');
                    }
                },
                error: function() {
                    console.error('获取数据失败');
                }
            });
        }

        // 默认加载月数据
        fetchc2PublishSucRateData('month');

        // 你可以根据需要设置定时器来自动刷新图表
        setInterval(function() {
            fetchc2PublishSucRateData('month');
        }, 5000);  // 5秒刷新一次数据


        // 发版情况总览
        var c2_release_version_overview_chart = echarts.init(document.getElementById('echarts-C2ReleaseVersionOverview'));

        // 获取数据并渲染漏斗图
        function fetchC2ReleaseVersionOverviewData() {
            var url = '/api/C2ReleaseVersionOverview/byMonth'; // 后端接口路径

            // 调用后端接口获取数据
            $.ajax({
                url: url,
                type: 'GET',
                success: function (response) {
                    if (response) {
                        // 准备数据
                        var funnelData = [
                            { name: '计划版本总数', value: response.totalVersions },
                            { name: '释放成功版本数', value: response.releasedVersions },
                            { name: '发布成功版本数', value: response.publishVersions }
                        ];

                        // 配置 ECharts 漏斗图
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c}'
                            },
                            legend: {
                                data: ['发版情况总览']
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {} // 添加保存为图片的按钮
                                }
                            },
                            series: [
                                {
                                    name: '发版情况总览',
                                    type: 'funnel',
                                    left: '10%',
                                    top: 60,
                                    bottom: 30,
                                    width: '80%',
                                    min: 0,
                                    max: Math.max(
                                        response.totalVersions || 0,
                                        response.releasedVersions || 0,
                                        response.publishVersions || 0
                                    ), // 自动设置最大值为最大数据值
                                    minSize: '0%',
                                    maxSize: '100%',
                                    sort: 'descending', // 按值排序
                                    gap: 5, // 漏斗间隙
                                    label: {
                                        show: true,
                                        position: 'inside',
                                        formatter: '{b}: {c}'
                                    },
                                    labelLine: {
                                        length: 10,
                                        lineStyle: {
                                            width: 1,
                                            type: 'solid'
                                        }
                                    },
                                    itemStyle: {
                                        borderColor: '#fff',
                                        borderWidth: 1,
                                        borderRadius: [30, 30, 0, 0]  // 圆角设置，使漏斗更圆滑
                                    },
                                    emphasis: {
                                        label: {
                                            fontSize: 20
                                        }
                                    },
                                    data: funnelData
                                }
                            ]
                        };

                        // 渲染图表
                        c2_release_version_overview_chart.setOption(option);
                    } else {
                        console.error('No data returned from the server');
                    }
                },
                error: function () {
                    console.error('Failed to fetch data from the server');
                }
            });
        }

        // 调用函数加载数据并渲染图表
        fetchC2ReleaseVersionOverviewData();

        // 可选：设置定时刷新数据的功能（单位：毫秒）
        setInterval(fetchC2ReleaseVersionOverviewData, 5000);




        // 已发布版本
        const chartsPublishedVersions = echarts.init(document.getElementById('echartsPublishedVersions'));

        // 函数：加载并展示数据
        function loadPublishedVersions() {
            $.ajax({
                url: '/api/C2Versions/byStatus', // 替换为你的接口地址
                method: 'GET',
                success: function (data) {
                    updatePublishedVersionsChart(data);
                },
                error: function (error) {
                    console.error('Error loading data:', error);
                }
            });
        }

        // 函数：更新图表内容
        function updatePublishedVersionsChart(data) {
            // 获取 publishedVersions 数组
            const publishedVersions = data.publishedVersions.split(','); // 假设返回是以逗号分隔的版本字符串

            const maxVersions = 10; // 最多展示最近 10 个版本
            const content = publishedVersions.slice(0, maxVersions); // 截取前 maxVersions 个版本

            // 创建文本框内容
            const graphicElements = content.map((version, index) => ({
                type: 'group',
                left: 'center',
                top: `${1 + index * 10}%`, // 每个文本框逐行排列
                children: [
                    {
                        type: 'rect',
        <!--                shape: { x: 0, y: 0, width: 1, height: 1 }, // 矩形填充整个 group-->
                        shape: { width: 200, height: 50 },
                        style: {
                            fill: '#bee9e8', // 白色背景
                            stroke: '#ddd', // 灰色边框
                            lineWidth: 0,
                            shadowBlur: 5,
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        left: -45, // 左侧偏移一半宽度，确保居中
                        top: -15 // 上下偏移一半高度，确保居中
                    },
                    {
                        type: 'text',
                        style: {
                            text: version,
                            fontSize: 12,
                            fontWeight: 'bold',
                            fill: '#333', // 深色字体
                            textAlign: 'center',
                            textVerticalAlign: 'left'
                        },
                        left: 0, // 文本中心点位于 group 的中心
                        top: 0 // 文本中心点位于 group 的中心
                    }
                ]
            }));

            // 设置图表选项
            const option = {
                backgroundColor: '#bee9e8', // 背景颜色
                graphic: graphicElements // 渲染文本内容
            };

            // 更新图表内容
            chartsPublishedVersions.setOption(option);
        }

        // 初始化时加载数据
        loadPublishedVersions();

        // 每隔 5 秒自动刷新数据
        setInterval(loadPublishedVersions, 5000);




<!--       // 已发布版本-->
<!--        const chartsPublishedVersions = echarts.init(document.getElementById('echartsPublishedVersions'));-->

<!--        // 函数：加载并展示数据-->
<!--        function loadPublishedVersions() {-->
<!--            $.ajax({-->
<!--                url: '/api/C2Versions/byStatus', // 替换为你的接口地址-->
<!--                method: 'GET',-->
<!--                success: function (data) {-->
<!--                    updatePublishedVersionsChart(data);-->
<!--                },-->
<!--                error: function (error) {-->
<!--                    console.error('Error loading data:', error);-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // 函数：更新图表内容-->
<!--        function updatePublishedVersionsChart(data) {-->
<!--            // 获取 publishedVersions 数组-->
<!--            const publishedVersions = data.publishedVersions.split(','); // 假设返回是以逗号分隔的版本字符串-->

<!--            const content = [];-->
<!--            const maxVersions = 8; // 最多展示最近 8 个版本-->
<!--            let versionCount = 0; // 记录已展示的版本数量-->

<!--            // 遍历版本数据，限制最多展示五个版本-->
<!--            publishedVersions.forEach((version) => {-->
<!--                if (versionCount >= maxVersions) return; // 超过 5 个版本则退出-->

<!--                // 添加版本信息-->
<!--                content.push(`{title|${version}}`);-->
<!--                versionCount++;-->
<!--            });-->

<!--            // 设置图表的选项-->
<!--            const option = {-->
<!--                tooltip: {-->
<!--                    show: true-->
<!--                },-->
<!--                color: ['#ff9999', '#66b3ff', '#99ff99', '#ffcc99'], // 自定义颜色-->
<!--                series: [-->
<!--                    {-->
<!--                        type: 'pie', // 使用饼图来承载文本-->
<!--                        radius: ['0%', '100%'], // 不显示饼图，仅作为容器-->
<!--                        label: {-->
<!--                            show: true,-->
<!--                            position: 'center',-->
<!--                            formatter: content.join('\n'), // 拼接内容-->
<!--                            rich: {-->
<!--                                title: {-->
<!--                                    fontSize: 12, // 标题字体大小-->
<!--                                    fontWeight: 'bold',-->
<!--                                    color: '#333',-->
<!--                                    padding: [6, 0]-->
<!--                                },-->
<!--                                divider: {-->
<!--                                    fontSize: 12, // 分隔线字体大小-->
<!--                                    color: '#aaa',-->
<!--                                    padding: [2, 0]-->
<!--                                }-->
<!--                            }-->
<!--                        },-->
<!--                        data: [{ value: 1 }] // 必须指定一个数据项-->
<!--                    }-->
<!--                ]-->
<!--            };-->

<!--            // 更新图表内容-->
<!--            chartsPublishedVersions.setOption(option);-->
<!--        }-->

<!--        // 初始化时加载数据-->
<!--        loadPublishedVersions();-->

<!--        // 每隔 5 秒自动刷新数据-->
<!--        setInterval(loadPublishedVersions, 5000);-->

    });
</script>
</body>
</html>